<template>
    <view class="page-wrapper">
        <view class="step-list">
            <view class="step-item">
                <view class="title">{{ $t('pages.addDevice.stepList.0') }}</view>
                <view class="desc-text">{{ $t('pages.addDevice.stepContentList.0') }}</view>
                <image src="/static/images/help/setup_1.png" mode="aspectFit" class="image" />
            </view>

            <view class="step-item">
                <view class="title">{{ $t('pages.addDevice.stepList.1') }}</view>
                <view class="desc-text">{{ $t('pages.addDevice.stepContentList.1') }}</view>
                <image src="/static/images/help/setup_2.png" mode="aspectFit" class="image" />
            </view>

            <view class="step-item">
                <view class="title">{{ $t('pages.addDevice.stepList.2') }}</view>
                <view class="desc-text">{{ $t('pages.addDevice.stepContentList.2') }}</view>
                <image src="/static/images/help/setup_3.png" mode="aspectFit" class="image" />
            </view>
        </view>
        <view class="bottom-box">
            <up-button :text="$t('pages.addDevice.setupConfirm')" size="normal" type="primary" 
                style="width: 620rpx;" shape="circle" @click="toNextPage" ></up-button>
        </view>
    </view>
</template>

<script setup>
import { ref, } from 'vue';
import { navigateToUniPage, encodeUrlWithObj, } from '@/utils/index';
import { onLoad, onShow, } from '@dcloudio/uni-app';

const query = ref({});
const toNextPage = ()=>{
	console.log(encodeUrlWithObj('/pages/configDevice/find', query.value))
	navigateToUniPage(encodeUrlWithObj('/pages/configDevice/find', query.value));
}

onLoad((options)=>{
	console.log(options)
    query.value = options;
})
</script>

<style lang="scss" scoped>
$bottom-height: 120rpx;
.page-wrapper{
    background-color: #FFFFFF;
    padding: 20rpx 30rpx;
    padding-bottom: $bottom-height;
}

.bottom-box{
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: $bottom-height;
    box-sizing: border-box;
}

.step-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 46rpx;
    row-gap: 48rpx;

    
    .step-item{
        display: flex;
        flex-direction: column;
        column-gap: 16rpx;
        justify-content: space-between;
        width: 320rpx;
        height: 320rpx;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
        border-radius: 40rpx;
        box-sizing: border-box;
        padding: 50rpx; 
        .image{
            align-self: center;
            width: 70rpx;
            height: 70rpx;
        }
        .title{
            color: #111827;
            font-weight: bold;
            font-size: 32rpx;
        }
        .desc{
            font-size: 30rpx;
        }
    }
}
</style>